<!DOCTYPE html>
<html lang="en-gb" dir="ltr">

    <head>
        <meta charset="utf-8">
        <meta name="viewport" content="width=device-width, initial-scale=1">
        <title>Upload - UIkit tests</title>
        <script src="js/test.js"></script>
    </head>

    <body>

        <div class="uk-container">

            <h1>Upload</h1>

            <h2>Select</h2>

            <div class="js-upload" uk-form-custom>
                <input type="file" multiple>
                <button class="uk-button uk-button-default" type="button" tabindex="-1">Select</button>
            </div>

            <h2>Drop Area</h2>

            <div class="js-upload uk-placeholder uk-text-center">
                <span uk-icon="icon: cloud-upload"></span>
                <span class="uk-text-middle">Attach binaries by dropping them here or</span>
                <div uk-form-custom>
                    <input type="file" multiple>
                    <span class="uk-link">selecting one</span>
                </div>
            </div>

            <progress id="js-progressbar" class="uk-progress" value="0" max="100" hidden></progress>

            <script>

                var bar = document.getElementById('js-progressbar');

                UIkit.upload('.js-upload', {

                    url: '',
                    multiple: true,

                    beforeSend: function () {
                        console.log('beforeSend', arguments);
                    },
                    beforeAll: function () {
                        console.log('beforeAll', arguments);
                    },
                    load: function () {
                        console.log('load', arguments);
                    },
                    error: function () {
                        console.log('error', arguments);
                    },
                    complete: function () {
                        console.log('complete', arguments);
                    },

                    loadStart: function (e) {
                        console.log('loadStart', arguments);

                        bar.removeAttribute('hidden');
                        bar.max = e.total;
                        bar.value = e.loaded;
                    },

                    progress: function (e) {
                        console.log('progress', arguments);

                        bar.max = e.total;
                        bar.value = e.loaded;
                    },

                    loadEnd: function (e) {
                        console.log('loadEnd', arguments);

                        bar.max = e.total;
                        bar.value = e.loaded;
                    },

                    completeAll: function () {
                        console.log('completeAll', arguments);

                        setTimeout(function () {
                            bar.setAttribute('hidden', 'hidden');
                        }, 1000);

                        alert('Upload Completed');
                    }

                });

            </script>

            <h2>JavaScript Options</h2>

            <div class="uk-overflow-auto">
                <table class="uk-table uk-table-striped">
                    <thead>
                        <tr>
                            <th>Option</th>
                            <th>Value</th>
                            <th>Default</th>
                            <th>Description</th>
                        </tr>
                    </thead>
                    <tbody>
                        <tr>
                            <td><code>url</code></td>
                            <td>String</td>
                            <td>''</td>
                            <td>The request url.</td>
                        </tr>
                        <tr>
                            <td><code>multiple</code></td>
                            <td>Boolean</td>
                            <td>false</td>
                            <td>Allow multiple files to be uploaded.</td>
                        </tr>
                        <tr>
                            <td><code>name</code></td>
                            <td>String</td>
                            <td>'files[]'</td>
                            <td>The name parameter.</td>
                        </tr>
                        <tr>
                            <td><code>type</code></td>
                            <td>String</td>
                            <td>POST</td>
                            <td>The request type.</td>
                        </tr>
                        <tr>
                            <td><code>params</code></td>
                            <td>Object</td>
                            <td>{}</td>
                            <td>Additional parameters.</td>
                        </tr>
                        <tr>
                            <td><code>allow</code></td>
                            <td>String</td>
                            <td>false</td>
                            <td>File name filter. (eg. *.png)</td>
                        </tr>
                        <tr>
                            <td><code>mime</code></td>
                            <td>String</td>
                            <td>false</td>
                            <td>File MIME type filter. (eg. images/*)</td>
                        </tr>
                        <tr>
                            <td><code>maxSize</code></td>
                            <td>Number</td>
                            <td>0</td>
                            <td>The maximum file size per file. (kB)</td>
                        </tr>
                        <tr>
                            <td><code>concurrent</code></td>
                            <td>Number</td>
                            <td>1</td>
                            <td>Number of files that will be uploaded simultaneously.</td>
                        </tr>
                        <tr>
                            <td><code>type</code></td>
                            <td>String</td>
                            <td>(xml, json, script, or html)</td>
                            <td>The expected response data type.</td>
                        </tr>
                        <tr>
                            <td><code>msg-invalid-mime</code></td>
                            <td>String</td>
                            <td>Invalid File Type: %s</td>
                            <td>Invalid MIME type message.</td>
                        </tr>
                        <tr>
                            <td><code>msg-invalid-name</code></td>
                            <td>String</td>
                            <td>Invalid File Name: %s</td>
                            <td>Invalid name message.</td>
                        </tr>
                        <tr>
                            <td><code>cls-dragover</code></td>
                            <td>String</td>
                            <td>'uk-dragover'</td>
                            <td>File name filter.</td>
                        </tr>
                        <tr>
                            <td><code>abort</code></td>
                            <td>Function</td>
                            <td>null</td>
                            <td>The abort callback.</td>
                        </tr>
                        <tr>
                            <td><code>before-all</code></td>
                            <td>Function</td>
                            <td>null</td>
                            <td>The beforeAll callback.</td>
                        </tr>
                        <tr>
                            <td><code>before-send</code></td>
                            <td>Function</td>
                            <td>null</td>
                            <td>The beforeSend callback.</td>
                        </tr>
                        <tr>
                            <td><code>complete</code></td>
                            <td>Function</td>
                            <td>null</td>
                            <td>The complete callback.</td>
                        </tr>
                        <tr>
                            <td><code>complete-all</code></td>
                            <td>Function</td>
                            <td>null</td>
                            <td>The completeAll callback.</td>
                        </tr>
                        <tr>
                            <td><code>error</code></td>
                            <td>Function</td>
                            <td>null</td>
                            <td>The error callback.</td>
                        </tr>
                        <tr>
                            <td><code>load</code></td>
                            <td>Function</td>
                            <td>null</td>
                            <td>The load callback.</td>
                        </tr>
                        <tr>
                            <td><code>load-end</code></td>
                            <td>Function</td>
                            <td>null</td>
                            <td>The loadEnd callback.</td>
                        </tr>
                        <tr>
                            <td><code>load-start</code></td>
                            <td>Function</td>
                            <td>null</td>
                            <td>The loadStart callback.</td>
                        </tr>
                        <tr>
                            <td><code>progress</code></td>
                            <td>Function</td>
                            <td>null</td>
                            <td>The progress callback.</td>
                        </tr>
                        <tr>
                            <td><code>fail</code></td>
                            <td>Function</td>
                            <td>alert</td>
                            <td>The fail callback. If name or MIME type are invalid.</td>
                        </tr>
                    </tbody>
                </table>
            </div>

        </div>

    </body>
</html>
